<template>
  <!-- 访问线性统计 -->
  <div id="line" class="overflow-x-auto w-full h-60"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import {watch} from "vue";

let option;
// 对外暴露的属性值
const props = defineProps({
  value: { // 属性值名称
    type: Object, // 类型为对象
    default: null // 默认为 null
  }
})

function init() {
  let chartDom = document.getElementById('line');
  let myChart = echarts.init(chartDom, null, {width: 600});

  // 将传入的数据设置到 myDate 数组中
  let list = props.value
  let pvDateArray = [];
  let pvCountArray = [];
  for (let i = 0; i < list.length; i++) {
    let curDate = list[i].pvDate
    let curCount = list[i].pvCount
    pvDateArray.push(curDate.split('-').slice(1).join('-'))
    pvCountArray.push(curCount)
  }

  option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: pvDateArray
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: pvCountArray,
        type: 'line',
        areaStyle: {}
      }
    ]
  };

  option && myChart.setOption(option);
}


watch(() => props.value, () => init())
</script>

<style scoped>

</style>